<template>
  <el-card style="margin-top:20px;width:100%;">
    <div slot="header" class="clearfix">
      <div id='about'>个人信息中心</div>
      <div class="sign" v-if="this.signpic" @click="tosign">
        已签约
      </div>
    </div>

    <div class="user-profile">
      <div class="box-center"  @click="closethumb">
        <pan-thumb   :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
          
          <van-uploader :after-read="afterRead"  >
            <div @click="changephoto">点击修改</div>
          </van-uploader>
         
          <!-- {{ user.cardname }} -->
        </pan-thumb>
      </div>
      <div class="box-center">
        <div @click="showname" class="user-name text-center">{{ user.name }}<i class="van-icon van-icon-edit"><span style="font-size:12px">昵称</span></i></div>
        <div class="user-role text-center text-muted"></div>
        <!-- user.role | uppercaseFirst -->
      </div>
      <div v-if="this.signpic" class="userm">
                  <div class="userfile1" @click="toshipin" >
          我的短视频
        </div>
            <div class="userfile" @click="tozuopin" >
          我的作品
        </div>
          <div class="userfile2" @click="toorder" >
          我的订单
        </div>
        </div>
      
        <div class="nosign"  @click="tosign" v-else>
        立即签约入驻
      </div> 
    </div>

    <div class="user-bio">
      <div class="user-education user-bio-section">

        <div class="user-bio-section-header">
          <svg-icon icon-class="education" />
          <span  @click="showdesc">个人简介<i style="float:right" class="van-icon van-icon-edit">编辑</i></span>
        </div>

        <div class="user-bio-section-body">
          <div  @click="showdesc"  class="text-muted">{{user.introduction}}</div>
        </div>

      </div>
    </div>



<image-clipper ref="clipper" v-if="visible" :img="imgURL" :clipper-img-width="250" :clipper-img-height="250" @ok="ok" @cancel="visible=false"></image-clipper>




      <!-- <div class="user-skills user-bio-section">
        <div class="user-bio-section-header"><svg-icon icon-class="skill" /><span>Skills</span></div>
        <div class="user-bio-section-body">
          <div class="progress-item">
            <span>Vue</span>
            <el-progress :percentage="70" />
          </div>
          <div class="progress-item">
            <span>JavaScript</span>
            <el-progress :percentage="18" />
          </div>
          <div class="progress-item">
            <span>Css</span>
            <el-progress :percentage="12" />
          </div>
          <div class="progress-item">
            <span>ESLint</span>
            <el-progress :percentage="100" status="success" />
          </div>
        </div>
      </div>-->

<van-popup   v-model="shownameinput" style="width:100%">
<van-cell-group>
  <!-- <span>请输入用户名：</span> -->
  <van-field @blur="updatecacheofaccount" ref="child" border v-model="user.name" placeholder="请输入用户名"  />
</van-cell-group>
</van-popup>

<van-popup   v-model="showdescinput" position="bottom">
<van-cell-group>
  <!-- <span>请输入用户名：</span> -->
  <van-field 
   @blur="updatecache" 
    type="textarea"
    placeholder="请输入个人简介"
    rows="10"
    autosize
     ref="desc" border v-model="user.introduction"/>
</van-cell-group>
</van-popup>

  </el-card>


</template>

<script>
import PanThumb from "@/components/PanThumb";
import ImageClipper from '@/components/imageClipper/imageClipper'
import Vue from 'vue';
import { Uploader } from 'vant';
import { Toast } from 'vant';
Vue.use(Toast);
 
import { gettokens } from '@/api/user'
Vue.use(Uploader);
 
import { Field } from 'vant';

Vue.use(Field);
import { Popup } from 'vant';
import { Cell, CellGroup } from 'vant';

Vue.use(Cell).use(CellGroup);
Vue.use(Popup);
export default {
  components: { PanThumb,ImageClipper, },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: "",
          email: "",
          avatar: "",
          roles: ""
        };
      }
    }
  },
  data(){
     return{
       imgSrc:null,
       visible: false,
       imgURL:null,
       showCutter: false, 
       signpic:"",
       shownameinput:false,
       showdescinput:false,
   uploader:null,
 uploadtag:1,
 photo:'',
 name:'',
 desc:'',
     }


  },
    mounted(){
   document.getElementsByClassName('pan-thumb')[0].style.transform='unset';
   this.inituploader();
    if(sessionStorage.getItem('signpic')&&sessionStorage.getItem('signpic')!='null')
      {
        this.signpic=true;
        console.log("--------------------------")
        console.log(this.signpic)
      }else{
        this.signpic=false;
        console.log("--------------------------")
        console.log(this.signpic)
      }
  },



 
  methods:{
    ok(src) { 
            // this.$refs.clipper.getBase64(data);

//base64转file


   console.log('确认2')

           console.log('接收到裁剪后的图片了')
           this.imgSrccut = src;
           this.showCutter = false;
           var imgori=this.imgSrc;
           //裁剪后
         var userData =
          '{"Vod":{"StorageLocation":"","Title":"this is title.我是标题","Description":"this is desc.我是描述","CateId":"19","index":"1","Tags":"tag1,tag2,标签3","fengmian":"http://www.baidu.com"}}';
                //裁剪前
                var userData2 =
          '{"Vod":{"StorageLocation":"","Title":"this is title.我是标题","Description":"this is desc.我是描述","CateId":"19","index":"2","Tags":"tag1,tag2,标签3","fengmian":"http://www.baidu.com"}}';
       
  this.uploader.addFile(
         src,
          null,
          null,
          null,
          userData
        );
       this.uploader.addFile(
         imgori,
          null,
          null,
          null,
          userData2
        );
    
     
     this.piccount=0;
      this.uploader.startUpload();














        },
    toshipin(){
              this.$router.push({  
             path:'/files/shipinlist',   
      })

    },
        tozuopin(){
              this.$router.push({  
        path:'/files/zuopin',   
      })

    },
            toorder(){
              this.$router.push({  
               path:'/order/order',   
      })

    },

    tosign(){
      if(this.user.introduction==null){
          this.$toast('请输入个人简介')
      }else{
        this.$router.push({  
        path:'/documentation/index',   
      })
      }
    },


    showname(){

         this.shownameinput=true;
         this.$nextTick(function(){
  this.$refs.child.focus();
         })
       
    },
     showdesc(){

         this.showdescinput=true;
         this.$nextTick(function(){
  this.$refs.desc.focus();
         })
       
    },
     updatecache(){

            // this.user.introduction=this.desc;
            // this.user.avatar=this.photo;
            // this.user.name=this.name;
            // this.$store.commit('user/SET_NAME', this.user.name)
     
            // this.$store.commit('user/SET_INTRODUCTION', this.user.desc)
    this.$store.dispatch('user/addshop',{brandName:this.user.name,tradeMark:this.user.avatar,shopLongDescription:this.user.introduction})

  },
  updatecacheofaccount(){

            // this.user.introduction=this.desc;
            // this.user.avatar=this.photo;
            // this.user.name=this.name;
            // this.$store.commit('user/SET_NAME', this.user.name)
     
            // this.$store.commit('user/SET_INTRODUCTION', this.user.desc)
    this.$store.dispatch('user/addmerchant',{companyName:this.user.name})
    this.$store.dispatch('user/addshop',{brandName:this.user.name,tradeMark:this.user.avatar,shopLongDescription:this.user.introduction})


  },
    afterRead(event){
      
  var userData =
          '{"Vod":{"StorageLocation":"","Title":"this is title.我是标题","Description":"this is desc.我是描述","CateId":"19","Tags":"tag1,tag2,标签3","fengmian":"http://www.baidu.com"}}';
        // this.imgSrc=event.file;
        this.uploader.addFile(
         event.file,
          null,
          null,
          null,
          userData
        );
        
       this.fileChange(event.file);
      //  console.log("------------------------++++++++++++++++"+this.imgSrc)
       
   
    
      // this.uploader.startUpload();

    },

fileChange(fileObj) {
      
      const reader = new FileReader()
      reader.onload = () => {
        this.imgURL = reader.result
        console.log("++++++++++++++++++++--------------"+this.imgURL);
        this.visible=true;
        
    }
    reader.readAsDataURL(fileObj)
},

    inituploader() {
   
    var _this = this;
      this.uploader = new AliyunUpload.Vod({
        //分片大小默认1M，不能小于100K
        partSize: 1048576,
        //并行上传分片个数，默认5
        parallel: 5,
        //网络原因失败时，重新上传次数，默认为3
        retryCount: 3,
        //网络原因失败时，重新上传间隔时间，默认为2秒
        retryDuration: 2,
        // 开始上传
        onUploadstarted: function(uploadInfo) {
          _this.$loadingshowjindu('0%')
          console.log(
            "onUploadStarted:" +
              uploadInfo.file.name +
              ", endpoint:" +
              uploadInfo.endpoint +
              ", bucket:" +
              uploadInfo.bucket +
              ", object:" +
              uploadInfo.object
          );
 
          gettokens({}).then(res => {
              console.log(res)

              console.log(this.uploader)
            _this.uploader.setSTSToken(
              uploadInfo,
              res.result.key,
              res.result.secret,
              res.result.token
            );
          });
        },
        // 文件上传成功
        onUploadSucceed: function(uploadInfo) {
           _this.$loadingshowjindu( "100%")
            _this.$loadingshowjindu( "")
          console.log(
            "onUploadSucceed: " +
              uploadInfo.file.name +
              ", endpoint:" +
              uploadInfo.endpoint +
              ", bucket:" +
              uploadInfo.bucket +
              ", object:" +
              uploadInfo.object +
              uploadInfo +
              JSON.stringify(uploadInfo)
          );
          console.log("videoId:" + uploadInfo.videoId);
          
          _this.$loadingclose();
          if(uploadInfo.videoId==null)
          {

               var tempic="http://tests.sodataint.com/"+uploadInfo.object;
               
           
               
            //     if(_this.uploadtag==1)
            //    {
            //    _this.photo=tempic;
            //    _this.user.avatar=_this.photo;
            //  _this.$store.commit('user/SET_AVATAR', _this.user.avatar)
            //     _this.updatecache();

            //    }
              
                   _this.$toast('上传图片完成')
              //  console.log("==============================="+tempic)
              //  _this.visible=true;
              //  _this.imgURL=tempic;
               
              //  _this.imgSrc = tempic;
              //  _this.showCutter=true;
            
               
                
          }
           
        },
        // 文件上传失败
        onUploadFailed: function(uploadInfo, code, message) {
          console.log(
            "onUploadFailed: file:" +
              uploadInfo.file.name +
              ",code:" +
              code +
              ", message:" +
              message
          );
        },
        // 文件上传进度，单位：字节
        onUploadProgress: function(uploadInfo, totalSize, loadedPercent) {
          console.log(
            "onUploadProgress:file:" +
              uploadInfo.file.name +
              ", fileSize:" +
              totalSize +
              ", percent:" +
              Math.ceil(loadedPercent * 100) +
              "%"
          );
          // $("#jindu").html("percent:" + Math.ceil(loadedPercent * 100) + "%");
             _this.$loadingshowjindu(Math.ceil(loadedPercent * 100) + "%")
        },
        // 上传凭证超时
        onUploadTokenExpired: function(uploadInfo) {
          console.log("onUploadTokenExpired");
          //上传方式1  实现时，根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
          // uploader.resumeUploadWithAuth(uploadAuth);
          // 上传方式2 实现时，从新获取STS临时账号用于恢复上传
          // uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
        },
        //全部文件上传结束
        onUploadEnd: function(uploadInfo) {
          console.log("onUploadEnd: uploaded all the files");
        }
      });
    },
    closethumb(){
    
      var tr= document.getElementsByClassName('pan-thumb')[0].style.transform;
         console.log('css: '+tr)
      if(tr=='unset')

       {  document.getElementsByClassName('pan-thumb')[0].style.transform='rotate(-110deg)';
            // document.getElementsByClassName('pan-thumb')[0].style.transform='';
       }
         else  if(tr=='rotate(-110deg)')
        {
          document.getElementsByClassName('pan-thumb')[0].style.transform='unset';
          // document.getElementsByClassName('pan-thumb')[0].style.transform='';
        }  
        // else if(tr=='')
        //  document.getElementsByClassName('pan-thumb')[0].style.transform='unset';
    },

         changephoto(){
           console.log('change photo')
        },
   
         changeimg( event ) {
        let image = document.getElementById('img'); //预览对象
        this.clip(event , {
          resultObj : image,
          aspectRatio : 1
        })
    }
    }

  
};
</script>

<style lang="scss" scoped>
/deep/ .el-card.is-always-shadow {
  box-shadow: unset;
}
/deep/ .van-overlay{
    background-color: rgba(0,0,0,.3);
}
/deep/ .el-card {
  border: unset;
}
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
  word-break: break-all;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
.nosign{
    width: 150px;
    height: 30px;
    background: cornflowerblue;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
.sign{
    width: 80px;
    height: 30px;
    border: #777;
    background: #dfe6ec;
    font-size: 14px;
    color: #000;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    /* margin-top: 20px; */
    bottom: 25px;
    float: right;
}
.userfile{
    width: 90px;
    height: 30px;
    background: cornflowerblue;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
.userfile1{
    width: 90px;
    height: 30px;
    background: lightseagreen;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
.userfile2{
    width: 90px;
    height: 30px;
    background: chocolate;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
.userm{
  display: flex;
  justify-content: space-around;
}
</style>
